<template>
	<view class="coupon">
		<view class="coupon-top">
			<view class="coupon-but" tabindex="1" @click="handleClick(1)" :style="{borderBottom: bottom}">未使用</view>
			<view class="coupon-but" tabindex="2" @click="handleClick(2)">已使用</view>
			<view class="coupon-but" tabindex="3" @click="handleClick(3)">已过期</view>
		</view>
		<view class="coupon-bon">
			<view class="coupon-list" v-for="coupon in coupons" :key="coupon.id" :style="{backgroundColor: activeColor}">
				<view class="couponl-t">
					<view class="couponl-t-l">
						<text>{{ coupon.station }}</text>
						<view> 满{{ coupon.minAmount }}元可用</view>
					</view>
					<view class="couponl-t-r">
						{{ coupon.discount }}
					</view>
				</view>
				<view class="couponl-b">
					<text class="couponl-t-l">有效期至：{{ coupon.expiryDate }}</text>
					<view class="couponl-b-r">去使用></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeColor: '#FF7738',
				bottom: '#fff solid 5rpx',
				coupons: [ // 直接写入静态数据
					{ id: 1, station: 'XX加油站', minAmount: 200, discount: '20', expiryDate: '2020.04.11-2023.05.11' },
					{ id: 2, station: 'YY加油站', minAmount: 150, discount: '15', expiryDate: '2021.01.01-2023.12.31' },
					{ id: 3, station: 'ZZ加油站', minAmount: 100, discount: '10', expiryDate: '2022.05.01-2023.11.30' }
					// 可以添加更多优惠券数据
				]
			}
		},
		methods: {
			handleClick(tabIndex) {
				// 根据点击的标签索引更新样式
				if (tabIndex === 1) {
					this.activeColor = '#FF7738';
					this.bottom = '#fff solid 5rpx';
				} else if (tabIndex === 2) {
					this.activeColor = '#FFBB99';
					this.bottom = 'transparent solid 5rpx';
				} else if (tabIndex === 3) {
					this.activeColor = '#BFBFBF';
					this.bottom = 'transparent solid 5rpx';
				}
			}
		}
	}
</script>

<style>
	.coupon {
		position: relative;
	}
	.coupon-top {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #297BF6;
		height: 300rpx;
		color: aliceblue;
	}
	.coupon-but {
		margin: 40rpx 60rpx 0 60rpx;
		line-height: 50rpx;
		height: 70rpx;
		text-align: center;
		border-bottom: #297BF6 solid 5rpx;
	}
	.coupon-but:focus {
		border-bottom: #fff solid 5rpx;
	}
	.coupon-bon {
		position: absolute;
		width: 93%;
		top: 140rpx;
		left: 30rpx;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 25rpx;
	}
	.coupon-list {
		margin: 20rpx;
		border-radius: 25rpx;
		background-color: #FF7738;
		height: 200rpx;
		color: #fff;
		padding: 20rpx 30rpx;
	}
	.couponl-t {
		border-bottom: #fff solid 1rpx;
		height: 130rpx;
	}
	.couponl-t-l {
		float: left;
	}
	.couponl-t-r {
		float: right;
		font-size: 60rpx;
		line-height: 100rpx;
	}
	.couponl-b {
		margin-top: 30rpx;
		font-size: 26rpx;
	}
	.couponl-b-r {
		float: right;
	}
</style>